<template>
  <div class="menu-container">
    <a-card class="card">
      <a-alert v-for="(item, index) in pathList" :key='item.key' :message="item.title" type="info" show-icon
        :style="{ marginLeft: index * 10 + 'px', marginRight: index * 10 + 'px', marginBottom: '20px' }">
        <template #icon><smile-outlined /></template>
      </a-alert>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import { reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { IMenu } from '@/type/Menu';
import menuService from '@/service/menuService';
import { SmileOutlined } from '@ant-design/icons-vue';
import * as utils from '@/util/util';

const $route = useRoute();
let menuList = reactive<IMenu[]>([]);
let pathList = reactive<IMenu[]>([]);

const getMenuList = () => {
  return menuService.getMenu().then(res => {
    menuList.length = 0;
    menuList.push(...res.menuList);
  })
}

const getPath = () => {
  const leaf = utils.getLeafByPath(menuList, $route.path);
  if (leaf) {
    const path = utils.getPath(menuList, leaf);
    pathList.push(...path);
  }
}
onMounted(() => {
  getMenuList().then(() => {
    getPath();
  });
})
</script>
<style lang='less' rel='stylesheet/less' scoped>
.menu-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
}
</style>